<template>
<div class="col-lg-12 control-section card-control-section flip_card_layout">
    <div class="e-card-resize-container">
        <div class="row">
            <div class="row card-layout">
                <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
                    <!-- Flip Card Layout  -->
                    <div tabindex="0" class="e-card e-business e-flip" id="card_flip" title="Click to flip the Card">
                        <div class="e-card-header e-front">
                            <div class="e-card-header-caption">
                                <div class="e-card-header-title">Mayumi Ohno</div>
                                <div class="e-card-sub-title">Marketing Representative</div>
                            </div>
                        </div>
                        <div class="e-card-actions e-front">
                            <button class="e-card-btn">
                                <div class="e-email e-card-btn-txt">mayum@mail.com</div>
                            </button>
                            <button class="e-card-btn">
                                <div class="e-email e-card-btn-txt">011-232-221</div>
                            </button>
                            <button class="e-card-btn">
                                <div class="e-email e-card-btn-txt">www.mayum.com</div>
                            </button>
                        </div>
                        <div class="e-card-header e-back">
                            <div class="e-card-header-caption">
                                <div class="e-card-header-title">Address</div>
                                <div class="e-card-sub-title">P.O. Box 78934
                                    <br> New Orleans
                                    <br>Los Angeles
                                    <br> Postal Code: 70117
                                    <br> USA</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
                    <div tabindex="0" class="e-card e-business e-flip" id="card_flip_profile" title="Click to flip the Card">
                        <div class="e-card-header e-back">
                            <div class="e-card-header-caption">
                                <div class="e-card-header-title">Address</div>
                                <div class="e-card-sub-title">970 Drummond Street
                                    <br> New York
                                    <br>New Jersey
                                    <br> Postal Code: 07102
                                    <br> USA
                                </div>
                            </div>
                        </div>
                        <div class="e-card-front e-front">
                            <div class="e-card-header e-card-right" style="justify-content:flex-end">
                                <div class="e-card-header-image"></div>
                            </div>
                            <div class="e-card-header e-card-right" style="text-align:right;">
                                <div class="e-card-header-caption">
                                    <div class="e-card-header-title">Creative One</div>
                                </div>
                            </div>
                            <div class="e-card-header e-card-left" style="text-align:left">
                                <div class="e-card-header-caption">
                                    <div class="e-card-header-title">John Doe</div>
                                    <div class="e-card-sub-title">Architecture</div>
                                </div>
                            </div>
                            <div class="e-card-separator e-card-left"></div>
                            <div class="e-card-content e-card-left" style="text-align:left">
                                <table>
                                    <tbody><tr>
                                        <td>johndoe@mail.com</td>
                                    </tr>
                                    <tr>
                                        <td>011-141-221</td>
                                    </tr>
                                    <tr>
                                        <td>www.johndoe.com</td>
                                    </tr>
                                </tbody></table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="action-description">
    <p>This sample demonstrates to flip(rotate) the <code>card</code> to show hidden information which is on back side of the card by clicking or focus-out of it.</p>
</div>
<div id="description">
    <p>Cards in this sample have a hidden content within the DOM (Document Object Model), which is set behind the visible card. On the click action handler of front card, the back-side content is shown with a flip animation.</p>
    <p>More information about Card can be found in this<a href="https://ej2.syncfusion.com/vue/documentation/card/getting-started/" target="_blank"> documentation</a> section.</p>
</div>
</div>
</template>
<style>

    .fabric .card-control-section.flip_card_layout .e-card:hover,
    .highcontrast .card-control-section.flip_card_layout .e-card:hover {
        border-width: 1px;
        padding: 1px;
    }

    .card-control-section.flip_card_layout #card_flip.e-card .e-front .e-card-header-caption .e-card-header-title,
    .card-control-section.flip_card_layout #card_flip_profile.e-card .e-front .e-card-header-caption .e-card-header-title,
    .card-control-section.flip_card_layout #card_flip.e-card .e-front .e-card-header-caption .e-card-sub-title,
    .card-control-section.flip_card_layout #card_flip_profile.e-card .e-front .e-card-header-caption .e-card-sub-title,
    .card-control-section.flip_card_layout #card_flip.e-card .e-card-actions button,
    .card-control-section.flip_card_layout #card_flip_profile.e-card .e-card-actions button {
        color: #000;
    }

    .highcontrast .card-control-section.flip_card_layout #card_flip_profile.e-card .e-card-front.e-front .e-card-header-caption .e-card-header-title,
    .highcontrast .card-control-section.flip_card_layout #card_flip_profile.e-card .e-card-front.e-front .e-card-header-caption .e-card-sub-title {
        color: #fff;
    }

    .card-control-section.flip_card_layout .e-card.e-business.e-flip .e-front .e-card-right .e-card-header-image,
    .card-control-section.flip_card_layout .e-card.e-business.e-flip .e-front .e-card-right .e-card-header-caption {
        margin-right: 15px;
    }

    .card-control-section.flip_card_layout .e-card.e-business.e-flip .e-front .e-card-left {
        margin-left: 20px;
        padding-left: 0;
        width: 50%;
    }

    .card-control-section.flip_card_layout #card_flip.e-card .e-card-header-image,
    .card-control-section.flip_card_layout #card_flip_profile.e-card .e-card-header-image {
        background-image: url('./images/creative_flip.png');
        background-size: cover;
        height: 75px;
        width: 75px;
    }

    .card-control-section.flip_card_layout #card_flip.e-card,
    .card-control-section.flip_card_layout #card_flip_profile.e-card {
        text-align: center;
        background-size: cover;
        min-height: 300px;
        justify-content: flex-end;
    }

    .card-control-section.flip_card_layout #card_flip.e-card,
    .card-control-section.flip_card_layout #card_profile.e-card {
        background-image: url('./images/vertical_img.png');
    }

    .card-control-section.flip_card_layout #card_flip.e-card.e-flipped,
    .card-control-section.flip_card_layout #card_flip_profile.e-card.e-flipped {
        background-image: none;
    }

    .card-control-section.flip_card_layout #card_flip.e-card .e-card-actions,
    .card-control-section.flip_card_layout #card_flip_profile.e-card .e-card-actions {
        justify-content: center;
        padding-bottom: 40px;
        padding-top: 22px;
    }

    .card-control-section.flip_card_layout #card_flip.e-card .e-card-actions button,
    .card-control-section.flip_card_layout #card_flip_profile.e-card .e-card-actions button {
        background-color: transparent;
        text-transform: none;
        border: none;
    }

    .highcontrast .card-control-section.flip_card_layout .e-card-header .e-card-header-image {
        border: none;
    }

    .card-control-section.flip_card_layout .e-card.e-flip .e-card-header.e-front,
    .card-control-section.flip_card_layout .e-card.e-flip .e-card-front.e-front,
    .card-control-section.flip_card_layout .e-card.e-flip .e-card-actions.e-front {
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        transform-style: preserve-3d;
        transition: all 1s ease-in-out;
        overflow: hidden;
    }

    .card-control-section.flip_card_layout .e-card.e-business.e-flip .e-card-front.e-front {
        display: block;
        height: 100%;
        width: 100%;
    }

    .card-control-section.flip_card_layout .e-card.e-business.e-flip .e-card-front.e-front .e-card-header:first-child {
        padding-bottom: 0;
    }

    .card-control-section.flip_card_layout .e-card.e-business.e-flip .e-back,
    .card-control-section.flip_card_layout .e-card.e-business.e-flip .e-back,
    .card-control-section.flip_card_layout .e-card.e-business.e-flip .e-card-front.e-front {
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        transform-style: preserve-3d;
        transition: all 1s ease-in-out;
        overflow: hidden;
        position: absolute;
        top: 0;
    }

    .card-control-section.flip_card_layout .e-card.e-business.e-flip .e-card-header.e-front,
    .card-control-section.flip_card_layout .e-card.e-business.e-flip .e-card-front.e-front,
    .card-control-section.flip_card_layout .e-card.e-business.e-flip .e-card-actions.e-front {
        transform: rotateX(0);
    }

    .card-control-section.flip_card_layout .e-card.e-business.e-flip .e-back {
        top: 45px;
        text-align: left;
    }

    .card-control-section.flip_card_layout .e-card.e-business.e-flip .e-back,
    .card-control-section.flip_card_layout .e-card.e-business.e-flip .e-back {
        transform: rotateX(180deg);
    }

    .card-control-section.flip_card_layout .e-card.e-business.e-flip.e-flipped .e-card-header.e-front,
    .card-control-section.flip_card_layout .e-card.e-business.e-flip.e-flipped .e-card-front.e-front,
    .card-control-section.flip_card_layout .e-card.e-business.e-flip.e-flipped .e-card-actions.e-front {
        transform: rotateX(180deg);
    }

    .card-control-section.flip_card_layout .e-card.e-business.e-flip.e-flipped .e-back,
    .card-control-section.flip_card_layout .e-card.e-business.e-flip.e-flipped .e-back {
        transform: rotateX(0);
    }

    .card-control-section.flip_card_layout .col-xs-6.col-sm-6.col-lg-6.col-md-6 {
        width: 100%;
        padding: 10px;
    }

    .card-control-section.flip_card_layout .card-layout {
        margin: auto;
        max-width: 400px;
    }

    @media (min-width: 870px) {
        .card-control-section.flip_card_layout .col-xs-6.col-sm-6.col-lg-6.col-md-6 {
            width: 50%;
        }
        .card-control-section.flip_card_layout .card-layout {
            max-width: 870px;
        }
    }
</style>
<script>
import Vue from "vue";
export default Vue.extend({
	mounted: function() {
        document.getElementById('card_flip').onclick = function (e) {
            var cardEle = e.currentTarget;
            if (cardEle.classList.contains('e-flipped')) {
                cardEle.classList.remove('e-flipped');
            }
            else {
                cardEle.classList.add('e-flipped');
            }
        };
        document.getElementById('card_flip').onblur = function (e) {
            var cardEle = e.currentTarget;
            cardEle.classList.remove('e-flipped');
        };
        document.getElementById('card_flip_profile').onclick = function (e) {
            var cardEle = e.currentTarget;
            if (cardEle.classList.contains('e-flipped')) {
                cardEle.classList.remove('e-flipped');
            }
            else {
                cardEle.classList.add('e-flipped');
            }
        };
        document.getElementById('card_flip_profile').onblur = function (e) {
            var cardEle = e.currentTarget;
            cardEle.classList.remove('e-flipped');
        };
    }
});

</script>